<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>p49-53组件创建的三种方式</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <!-- 组件化：是从UI界面的角度进行划分的，前端的组件化，方便组件的重用 -->
    <!-- 模块化：是从代码的逻辑角度进行划分的，方便代码分层开发，保证每个职能模块的功能单一 -->
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <mycom2></mycom2>
        <mycom3></mycom3>
    </div>
    <div id="app2">
        <mycom3></mycom3>
        <privatecom1></privatecom1>
        <privatecom2></privatecom2>
    </div>
    <!-- 在被控制的#app的元素外面，使用template元素，定义组件的HTML模板结构 -->
    <template id="tmp1">
        <div>
            <h3>这是第三种方式创建的组件</h3>
        </div>
    </template>
    <template id="privatetmp1">
        <h3>这是vm2的第二个私有组件</h3>
    </template>
    <script>
        //无论哪种方式创建出来的组件，组件的template属性指向的模板内容，有且只能有一个根元素
        //第一种创建方式
        // 1.1通过Vue.extend来创建全局的Vue组件
        var vc=Vue.extend({
            template:"<h3>这是Vue.extend创建的组件</h3>"//通过template属性，指定了组件要展示的HTML结构
        })
        // 1.2使用Vue.compent("组件的名称",创建出来的模板对象)
        Vue.component("myComponent",vc)
        //第二种创建模式
        Vue.component("mycom2",{
            template:"<h3>这是第二种方式创建的组件</h3>"
        })
        //第三种创建模式
        Vue.component("mycom3",{
            template:"#tmp1"
        })
        var vm=new Vue({
            el:"#app",
            data:{},
            methods:{},
            filters:{},
            directives:{}
        })
        var vm2=new Vue({
            el:"#app2",
            data:{},
            methods:{},
            filters:{},
            directives:{},
            components:{
                "privatecom1":{
                    template:"<h3>这是vm2的第一个私有组件</h3>"
                },
                "privatecom2":{
                    template:"#privatetmp1"
                }
            }
        })
    </script>
</body>
</html>